
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div1{width:100px; height: 100px; background-color: red;position: absolute;z-index: 2}
	#div2{width: 200px; height: 200px; background-color: green; position: absolute; left: 500px; top:150px;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');
		var oBox = document.getElementById('div2');

		oDiv.onmousedown = function (ev){
			var ev = ev || event;

			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;

			document.onmousemove = function (ev){
				var ev = ev || event;

			 	oDiv.style.left = ev.clientX -disX + 'px';
			 	oDiv.style.top = ev.clientY - disY + 'px';

			 	var L1 = oDiv.offsetLeft;
			 	var R1 = oDiv.offsetLeft + oDiv.offsetWidth;
			 	var T1 = oDiv.offsetTop;
			 	var B1 = oDiv.offsetTop + oDiv.offsetHeight;

			 	var L2 = oBox.offsetLeft;
			 	var R2 = oBox.offsetLeft + oBox.offsetWidth;
			 	var T2 = oBox.offsetTop;
			 	var B2 = oBox.offsetTop + oBox.offsetHeight;

			 	if (R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2) {
					oBox.style.backgroundColor = 'green';
				}else{
					oBox.style.backgroundColor = 'blue';
				}
				
			}

			document.onmouseup = function (){

			 	document.onmouseup = document.onmousemove = null;

			 	oDiv.releaseCapture && oDiv.releaseCapture();
			}

			oDiv.setCapture && oDiv.setCapture();
			return false;
		}
	}
	</script>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>